<!--这是棋盘格子组件Cell.vue-->
<!--一般来说，组件命名都是首字母大写，告诉别人这个是组件-->
<!-- 单文件组件中的template script style三个的顺序位置是可以改变的，谁先无所谓-->

<template>
  <!-- cell 棋盘格 -->
  <!-- 当点击棋盘格的时候，click事件将flag变为true，因为只有当flag为true的时候，才会将template展示出来，才会显示那个X -->
  <div
    class="cell"
    v-on:click="clickSelf"
  >
    <template v-if="flag">{{text}}</template>
    <!-- template 上是的click是没法用的，因为template是不存在的东西，没法点击，只能把click放在父元素上 -->
    <template v-else></template>
  </div>
</template>

<script>
export default {
  // 属性，这个组件里的属性声明
  // !这个n是外部调用Cell组件的时候传入的属性，所以要声明一下
  props: ['n'],
  // !单文件组件中，data必须是一个函数!!
  // 组件中的属性
  data () {
    return { flag: false, text: '' }
  },
  // 方法，当点击棋盘格的时候，触发clickOn函数，同时通过$emit通知调用组件的地方发生了点击事件
  methods: {
    clickSelf () {
      // 当text不是最开始的空状态，则表示已经点击过了，不允许再次修改，直接return
      if (this.text !== '') {
        return false
      }
      // if (this.winner !== '') {
      //   return false
      // }
      this.flag = true
      this.text = this.n % 2 === 0 ? 'X' : 'O'
      // !向调用Cell组件的外部传递@gettext事件和数据this.text
      // 要和外部的$event一起使用，外部才能获取到this.text
      this.$emit('gettext', this.text)
    }
  }
}
</script>

<style>
  .cell{
    /* 棋牌格子边框 */
    border: 1px solid black;
    /* 棋牌格子大小 */
    width: 100px;
    height: 100px;
    /* 棋牌格子中的内容居中 */
    display: flex;
    justify-content: center;
    align-content: center;
    /* 棋牌格子中的内容大小设置为80px */
    font-size: 80px;
  }
</style>
